<script setup lang="ts">
import { chooseImage, showLoading, showModal, showToast, hideLoading } from '@tarojs/taro';
import FACE_UPLOAD from '/@/assets/image/icon/face-upload.png';
import { getSysImgUrl } from '/@/utils/index';
import { state } from './state';
import { onMounted } from 'vue';
import compressImage from './utils/image-compress';
import { fileNameForUploadFile, uploadImageFile } from '/@/utils/file';
import {
  ACCESS_CONTROL_USER_FACE_SAVE_APP,
  ACCESS_CONTROL_USER_FACE_REMOVE_APP,
  ACCESS_CONTROL_USER_FACE_QUERY_APP,
} from '/@/api/modules/access-control/access-control-user-face';
/**
 * @function 获取图片
 */
function getImage() {
  //已经选择图片，要删除才能选择了
  !state.facePicUrl &&
    chooseImage({
      count: 9,
      sizeType: ['original', 'compressed'],
      sourceType: ['album', 'camera'],
      success: (res) => {
        res.tempFiles.forEach(({ originalFileObj, path }) => {
          showLoading();
          //image compression
          const suffix =
            originalFileObj?.name.substring(originalFileObj?.name.lastIndexOf('.')) || ''; //取文件名后缀
          const fileName = fileNameForUploadFile(suffix);
          const originalFileName = originalFileObj?.name || '';
          let filePath = path;
          // 大小判断,大于200K要压缩
          if (originalFileObj && originalFileObj?.size > 200 * 1024) {
            //先压缩
            compressImage([res.tempFiles[0].originalFileObj]).then((list: string[]) => {
              uploadImageFile(list[0], originalFileName, fileName, 'face', (url: string) => {
                state.facePicUrl = url;
                hideLoading();
              });
            });
          } else {
            uploadImageFile(filePath, originalFileName, fileName, 'face', (url: string) => {
              state.facePicUrl = url;
              hideLoading();
            });
          }
        });
      },
    });
}
function submit() {
  if (!state.facePicUrl) {
    showToast({ title: '上传图片不能为空', icon: 'error' });
    return;
  }
  showLoading();
  ACCESS_CONTROL_USER_FACE_SAVE_APP({ dto: { facePicUrl: state.facePicUrl } }).then((res) => {
    if (res.comResp.code === 100) {
      queryDetail();
    }
  });
}

function reset() {
  state.facePicUrl = '';
}

function removeFaceImage() {
  showModal({
    title: '移除人脸信息',
    content: '您确定要移除人脸信息吗？',
    success: function (response) {
      if (response.confirm) {
        remove();
      }
    },
  });
}

/**
 * 删除用户人脸上传图片
 */
function remove() {
  showLoading();
  ACCESS_CONTROL_USER_FACE_REMOVE_APP({ dto: { id: state.id } }).then((res) => {
    if (res.comResp.code === 100) {
      queryDetail();
      state.uploadStatus = ['', ''];
    }
  });
}

/**
 * 查询人脸信息
 */
function queryDetail() {
  state.facePicUrl = '';
  showLoading();
  ACCESS_CONTROL_USER_FACE_QUERY_APP({}).then((res) => {
    state.id = res.id;
    state.facePicUrl = res.facePicUrl || '';
    state.isFacePic = res.isFacePic;
    state.distributionStatus = res.distributionStatus;

    if (state.isFacePic === 1) {
      state.uploadStatus[0] = '已完成';
    }

    if (state.distributionStatus === 3) {
      state.uploadStatus[1] = '已完成';
    }
  });
}

onMounted(() => {
  queryDetail();
  state.uploadStatus = ['', ''];
});
</script>

<template>
  <view class="face-upload app-page--1">
    <app-navbar title="人脸上传" />
    <scroll-view class="app-page__wrapper" :scroll-y="true" :lower-threshold="100">
      <view class="face-upload__wrapper">
        <nut-cell-group>
          <nut-cell>
            <template v-slot:title>
              <view class="face-upload__image-container">
                <nut-avatar size="130" shape="square" @click="getImage">
                  <image
                    :src="
                      state.facePicUrl.length > 0 ? getSysImgUrl(state.facePicUrl) : FACE_UPLOAD
                    "
                  />
                </nut-avatar>
              </view>
            </template>
          </nut-cell>
          <nut-cell>
            <template v-slot:title>
              <view>
                <text class="face-upload__description">1.人脸正面免冠照，露出眉毛和眼睛；</text>
              </view>
              <view>
                <text class="face-upload__description">2.照片白底、无逆光、无PS、无美颜。</text>
              </view>
            </template>
          </nut-cell>
        </nut-cell-group>

        <nut-cell-group>
          <nut-cell>
            <template v-slot:title>
              <text class="face-upload__title">处理进度</text>
            </template>
          </nut-cell>
          <nut-cell>
            <app-face-upload-list :list="state.uploadStatus" />
          </nut-cell>
        </nut-cell-group>
      </view>
    </scroll-view>
    <view class="face-upload__footer" v-if="state.isFacePic === 2">
      <nut-button class="face-upload__footer-btn" type="info" @click="submit()">上传</nut-button>
      <nut-button class="face-upload__footer-btn" type="info" @click="reset()">重拍</nut-button>
    </view>
    <view class="face-upload__footer" v-else>
      <nut-button class="face-upload__footer-btn" type="danger" @click="removeFaceImage()">
        移除
      </nut-button>
    </view>
  </view>
</template>

<style lang="scss">
@import './index.scss';
</style>
